<template>
  <div style="margin-top:10px;">
    <div v-for="(item,index) in farmList" :key="index" class="plant-view">
      <div class="item" :style="{width:getWidth(index+1)}">
        <div
          class="plant-title-view"
          :class="{'plant-title-view1':(index+1)==1,
                   'plant-title-view2':(index+1)==2,
                   'plant-title-view3':(index+1)==3}"
        >
          <img v-if="(index+1)==1" src="@/assets/dataStation/ps1.png">
          <img v-if="(index+1)==2" src="@/assets/dataStation/ps2.png">
          <img v-if="(index+1)==3" src="@/assets/dataStation/ps3.png">
          <img v-if="(index+1)==4" src="@/assets/dataStation/ps4.png">
          <img v-if="(index+1)==5" src="@/assets/dataStation/ps5.png">
          <img v-if="(index+1)==6" src="@/assets/dataStation/ps6.png">
          {{ item.farmName }}
          <div class="plant-right-view"><i /> {{ item.cropName }}、{{ item.cropSeriesName }}</div>
        </div>
        <div class="grid">
          <div class="grid-item">
            <div class="num">{{ item.mapAreaSize }}</div>
            <div class="name">种植面积(亩)</div>
          </div>
          <div class="grid-item">
            <div class="num">{{ item.avgYield }}</div>
            <div class="name">均亩产(kg)</div>
          </div>
          <div class="grid-item">
            <div class="num">{{ item.shougeYield }}</div>
            <div class="name">产量(kg)</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="farmList.length==0" class="plant-view">
      <el-empty class="empty-view" style="width: 70%;" :image="emptImg" :image-size="100" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import { getYieldTop } from '@/api/board'
import emptImg from '@/assets/dataStation/kong.png'

const farmList = ref([])
const props = defineProps({
  cityName: {
    type: String,
    default: '重庆市'
  },
  year: {
    type: String,
    default: '2023'
  },
  item: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
watch(() => props.cityName, (n, o) => {
  getData()
})
watch(() => props.year, (n, o) => {
  getData()
})
const getData = () => {
  getYieldTop({
    province: props.cityName,
    'year': props.year }).then((res) => {
    if (res.code === 0) {
      farmList.value = res.data || []
    }
  })
}

const getWidth = (index) => {
  if (index === 1) {
    return '63%'
  }
  if (index === 2) {
    return '66%'
  }
  if (index === 3) {
    return '70%'
  }
  if (index === 4) {
    return '73%'
  }
  if (index === 5) {
    return '78%'
  }
  if (index === 6) {
    return '83%'
  }
  return '63%'
}
onMounted(() => {
  getData()
})

</script>
<style lang="scss">

.plant-view{
  width:100%;
  display:flex;
  justify-content:end;
  margin-bottom:10px;
  .item{
       background-image: url('@/assets/dataStation/plan1.png');
        background-size:100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        width:63%;
        .plant-title-view1,
        .plant-title-view2,
        .plant-title-view3,
        .plant-title-view{
          font-size:14px;
          color:#BBECE5;
          display:flex;
          justify-content:left;
          align-items:center;
          height:30px;
          padding:0 10px;
          position:relative;
          background-image: linear-gradient(to right,#00C69960, #9EFFE710);
          img{
            height:60%;
            margin-right:3px;
          }
          .plant-right-view{
            position:absolute;
            right:10px;
            display: flex;
            align-items: center;
            font-size:13px;
            font-weight:400;
            i{
              background-color: #00EBB4;
              display: block;
              height: 5px;
              width: 5px;
              border-radius: 5px;
              margin-right: 4px;
              box-shadow: 1px 0px 10px #00ebb4;
            }
          }
        }
        .plant-title-view1{
          background-image: linear-gradient(to right,#EE823460, #ECA72410);
        }
        .plant-title-view2{
          background-image: linear-gradient(to right,#CE899260, #F1C3C910);
        }
        .plant-title-view3{
          background-image: linear-gradient(to right,#CE899260, #F1C3C910);
        }
        .grid{
          display:flex;
          justify-content:center;
          .grid-item{
            width:33.3%;
            text-align:center;
            padding:10px  0;
            .num{
              font-size: 16px;
              color: #B1FFED;
              font-weight:600;
            }
            .name{
              font-size: 13px;
              color: #A4D9CD;
              padding-top:6px;
            }
          }
        }
  }
}

</style>
